<script setup>
import { reactive } from 'vue'
import useViewEvent from '@/core/hooks/useViewEvent'
import userApi from '@/api/system/UserApi'

const state = reactive({ 
  visible: false,  
  loading: false, // 加载开关
})
// 表单结构
const original = {
  userName: '',
  passwd: '',
  salt: '',
  petName: '',
  email: '',
  mobile: '',
  roles: [],
  notes: ''
}
// 表单数据
const formState = reactive({})

// 初始化数据
const { InitializeData } = useViewEvent({state: state, remoteFetchData: userApi.getFormModelById, formState: formState, original: original })

//向父组件暴露方法和属性
defineExpose({ InitializeData })
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`查看用户信息`"
    placement="right"
    :width="'50%'">
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <a-spin :spinning="state.loading">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="用户名">{{ formState.userName }}</a-descriptions-item>
          <a-descriptions-item label="昵称">{{ formState.petName }}</a-descriptions-item>
          <a-descriptions-item label="手机号">{{ formState.mobile }}</a-descriptions-item>
          <a-descriptions-item label="邮箱">{{ formState.email }}</a-descriptions-item>
          <a-descriptions-item label="角色">
            <a-tag v-for="(item, idx) in formState.roles" :key="idx" color="#55acee">
              <template #icon>
                <twitter-outlined />
              </template>
              {{ item.label }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="备注">{{ formState.notes }}</a-descriptions-item>
        </a-descriptions>
      </a-spin>
    </a-card>
  </a-drawer>
</template>